import React, { useState, useEffect } from 'react';

import { useNavigate,useLocation } from 'react-router-dom'
import { Layout, Menu } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { HomeOutlined } from '@ant-design/icons';

import SideeContent from './RightContent/SideeContent'
import itemAll from './RightContent/GetItem'
import '@/style/scss/layout.scss'

const { Sider } = Layout;

const App: React.FC = () => {

  const { collapsed } = useSelector((state: any) => state.afeng)

  const navigate = useNavigate()

  const { pathname } = useLocation()
  
  const dispatch = useDispatch()

  // console.log(pathname);

  
  return ( 
    <Layout className='layout'>
      {/** 左边导航栏  */}
      <Sider trigger={null} collapsible collapsed={collapsed} >
        <div className='title'>
          {collapsed ? <HomeOutlined style={{ fontSize:'2rem' }} /> : '花公子管理系统'}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[pathname]}
          items={itemAll}
          defaultOpenKeys={[pathname]}
          onClick={(to: any) => navigate(to.key)}
        />
      </Sider>
      <SideeContent />
    </Layout >
    
  );
};

export default App;
